<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            position: fixed;
            padding: 5px;
            width: 320px;
            height: 400px;
            right: 5px;
            bottom: 5px;
            background-color: gainsboro;
        }

        .wrap .ad {
            display: flex;
            justify-content: space-between;
        }

        #dateBox {
            display: flex;
        }

        .content {
            padding-top: 20px;
        }

        .content p {
            margin-top: 20px;
        }
        #adBox{
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrap" id="adBox">
        <div class="ad">
            <div class="title">距离广告关闭还有<span id="count">10</span>秒</div>
            <div class="close" id="close">X</div>
        </div>
        <div class="content">
            <!-- 静态页面 -->
            <p id="dateBox"></p>
            <p id="weekBox"></p>
            <p id="timeBox"></p>
        </div>
    </div>
</body>
<script>
    // 0. 页面打开5秒后小广告出来
    // 1. 倒计时10秒后关闭，关闭后5s自动打开    （10秒倒计时）
    // 2. 点击 X  直接关闭   ，关闭后5s自动打开 （10秒倒计时）
    var datebox=document.getElementById("dateBox")
    var weekBox=document.getElementById("weekBox")
    var timeBox=document.getElementById("timeBox")
    var week=["seven","one","two","three","four","five","six"] 
    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var date_1=date.getDate();
    var day=date.getDay();
    var hours=date.getHours();
    var minute=date.getMinutes();
    var seconds=date.getSeconds();
    var adBox=document.getElementById("adBox")
    var count=document.getElementById("count");
    zero(year);
    zero(month);
    zero(date);
    zero(hours);
    zero(minute);
    zero(seconds);
    function changeImg(num){
        var num=num+""
        var str=""
        for(var i=0;i<num.length;i++){
            var a=num.charAt(i)
                str += '<img src="images/'+a+'.png" alt="">'
            
        }
        return str
        console.log(str)
    }
    function zero(a){
        a=a<10?"0"+a:a;
        return a;
    }
    var gb=document.getElementById("close");
    function fn(){
        var date=new Date();
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var date_1=date.getDate();
        var day=date.getDay();
        var hours=date.getHours();
        var minute=date.getMinutes();
        var seconds=date.getSeconds();
        year=zero(year);
        month=zero(month);
        date=zero(date);
        hours=zero(hours);
        minute=zero(minute);
        seconds=zero(seconds);
        console.log(year,month,date_1,day,hours,minute,seconds) 
        datebox.innerHTML=changeImg(year)+"年"+changeImg(month)+"月"+changeImg(date_1)+"日"
        weekBox.innerHTML=w(day)
        timeBox.innerHTML=changeImg(hours)+" "+changeImg(minute)+" "+changeImg(seconds) 
    }
    function w(num){
        var str=""
        str='星期<img src="images/'+week[num]+'.png" alt="">'
        return str
    }   
   setInterval(fn,1000)

  setTimeout(fn_djs,5000)
  var time;
  function fn_djs(){
    adBox.style.display="block";
    var i=10;
    count.innerHTML=i;
  time=setInterval(function(){
      i--;
      count.innerHTML=i
      if(i<=0){
          clearInterval(time)
          adBox.style.display="none"
         setTimeout(function(){
            fn_djs()
         },4000)
  }     
  },1000)
  }
  gb.onclick=function (){
      clearInterval(time)
      adBox.style.display="none"
         setTimeout(function(){
            fn_djs()
         },4000)
  }
</script>

</html>